<script lang="ts" setup>
  import Button from '@sscd/button';
  import Modal from '@sscd/modal';

  // vue3.4+版本可能会出现Modal无法正常关闭，需调用Modal.remove()
  const countDown = () => {
    let secondsToGo = 5;
    const modal = Modal.success({
      title: 'This is a notification message',
      content: `This modal will be destroyed after ${secondsToGo} second.`,
    });
    const interval = setInterval(() => {
      secondsToGo -= 1;
      modal.update({
        content: `This modal will be destroyed after ${secondsToGo} second.`,
      });
    }, 1000);
    setTimeout(() => {
      clearInterval(interval);
      modal.destroy();
    }, secondsToGo * 1000);
  };
</script>

<template>
  <div class="demo">
    <div class="demo-title">手动更新和移除</div>
    <div class="demo-content">
      <Button @click="countDown">Open modal to close in 5s</Button>
    </div>
  </div>
</template>
